<template>
  <div class="user">
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card >
  <el-row :gutter="20">
  <el-col :span="8">
    <el-input placeholder="请输入内容" v-model="lists.query" clearable @clear='getlist'>
    <el-button slot="append" icon="el-icon-search" @click="serch" ></el-button>
    </el-input>
  </el-col>
  <el-col :span="1">
    <el-button type="primary" @click="dialogVisible=true">添加</el-button>
    <!-- 弹出框 -->
    <el-dialog
  title="添加"
  :visible.sync="dialogVisible"
  width="40%"
  :before-close="handleClose">
  <el-form ref="forms" :model="form" :rules='addform' label-width="20px">
   <el-form-item  prop="username">
    <el-input placeholder="请输入内容" v-model="form.username">
      <template slot="prepend">用户</template>
    </el-input>
   </el-form-item>
    <el-form-item  prop="password">
    <el-input placeholder="请输入内容" v-model="form.password">
      <template slot="prepend">密码</template>
    </el-input>
   </el-form-item>
    <el-form-item  prop="email">
    <el-input placeholder="请输入内容" v-model="form.email">
      <template slot="prepend">邮箱</template>
    </el-input>
   </el-form-item>
    <el-form-item  prop="mobile">
    <el-input placeholder="请输入内容" v-model="form.mobile">
      <template slot="prepend">电话</template>
    </el-input>
   </el-form-item>
  
  </el-form>
   
 

  <span slot="footer" class="dialog-footer">
    <el-button @click="resetForm('forms')">取 消</el-button>
    <el-button type="primary" @click="submitForm('forms')">确 定</el-button>
  </span>
</el-dialog>
<!-- 1 -->
  </el-col>
 
</el-row>
 <el-table
    :data="list"
    style="width: 100%"
     stripe
     border
   > <el-table-column
   label="#"
      type="index"
     
    >
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="180">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话">
    </el-table-column>
      <el-table-column
      prop="role_name"
      label="角色">
    </el-table-column>
      <el-table-column
      prop="mg_state"
      label="状态">
      <template slot-scope="scope">
        <!-- {{scope.row}} -->
        <el-switch
        v-model="scope.row.mg_state"
        @change="sd(scope.row)"
        >
       </el-switch>
 </template>
    </el-table-column>

    <!-- 编辑区域 -->
     <el-table-column label="操作">
       <template slot-scope="scope">
    <el-row>
   <el-tooltip :enterable="false" effect="light" content="编辑" placement="top-start">
        <el-button type="primary" icon="el-icon-edit" @click="edil(scope.row.id)" ></el-button>
    </el-tooltip>
    <!--  -->

    <el-dialog
  title="编辑"
  :visible.sync="edail"
  width="30%"
  :before-close="handleClose"
  @close='fu'>
  <el-form ref="deailforms" :model="edilform" :rules='addform' label-width="20px">
   <el-form-item prop="username" >
    <el-input placeholder="请输入内容" v-model="edilform.username" disabled>
      <template slot="prepend">用户</template>
    </el-input>
   </el-form-item>
  
    <el-form-item  prop="email">
    <el-input placeholder="请输入内容" v-model="edilform.email">
      <template slot="prepend">邮箱</template>
    </el-input>
   </el-form-item>
    <el-form-item  prop="mobile">
    <el-input placeholder="请输入内容" v-model="edilform.mobile">
      <template slot="prepend">电话</template>
    </el-input>     
   </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="edilclear">取 消</el-button>
    <el-button type="primary" @click="edilsubmit">确 定</el-button>
  </span>
</el-dialog>

    <!--  -->
    <el-tooltip :enterable="false"   effect="light" content="修改" placement="top-start">
        <el-button type="warning" icon="el-icon-setting" @click="fenpei(scope.row)"></el-button>
    </el-tooltip>

    <!-- 修改分配权限 -->
    <el-dialog
  title="分配"
  :visible.sync="fenp"
  width="30%"
 >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="fenp = false">取 消</el-button>
    <el-button type="primary" @click="fenp = false">确 定</el-button>
  </span>
</el-dialog>



   <el-tooltip :enterable="false"   effect="light" content="删除" placement="top-start">
        <el-button type="danger" icon="el-icon-delete" @click="open(scope.row.id)"></el-button>
   </el-tooltip>
  
     </el-row>
       </template>
    </el-table-column>
   
  </el-table>
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="lists.pagenum"
      :page-sizes="[1, 2, 3, 10]"
      :page-size="lists.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      
      :total="total">
    </el-pagination>

  
  
</el-card>


  </div>
</template>
<script>

  
export default {
name:'User',
  data() {
  var checkEmail = (rules, value, callback) => {
   const reg=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
    if ( reg.test(value)) {
      return callback()
    }else{
      callback(new Error('不正确的邮箱'));
    }
   
      };

      var checkNum= (rules, value, callback) => {
       const reg=/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if ( reg.test(value)) {
         return callback()
        }else{
        callback(new Error('不正确的手机号码'));
    }
      };



    return{
      lists:{
       query:'',
       pagenum:1,
       pagesize:5
      },
      list:[],
      total:0,
      value:'',
      dialogVisible: false,
      edail:false,
      form:{
           username:'',
           password:'',
           email:'',
           mobile:''
      },
      edilform:{},
      fenp:false,

      addform:{
         username:[
             { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 8, message: '长度在 2 到 8个字符', trigger: 'blur' }
         ],
         password:[
             { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18个字符', trigger: 'blur' }
         ],
         email:[
             { required: true, message: '请输入邮箱', trigger: 'blur' },
              { min: 6, max: 18, message: '长度在 6 到 18个字符', trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
         ],
         mobile:[
             { required: true, message: '请输入电话号码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18个字符', trigger: 'blur' },
              { validator: checkNum, trigger: 'blur' }
         ],
         
      },
      names:''

    }
  },
  components:{
   
  },
  created(){
    this.getlist()
   
  },
  methods:{
    // ffffffffffffffffffffffff
    fenpei(row){
      console.log(row,'asas');
     this.fenp=true
    },
     open(id) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         
          this.$http.delete('users/'+id).then(res=>{
            
            this.getlist()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
  

    fu(){
      this.$refs.deailforms.resetFields();
    },
    async edil(id){
     this.edail=true
   const {data:res}=await this.$http.get(`users/${id}`)
      // console.log(res.data.data);
      this.edilform=res.data
      console.log( this.edilform);
    
    },
    // 弹出框
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

       submitForm(forms) {
        this.$refs[forms].validate((valid) => {
          if (!valid) {
             this.$message.error('添加失败')
           return

          } else {
            this.$http.post('users',this.form).then(res=>{
               this.$message.success('添加成功')
               this.getlist()
            })
          }

        });
         this.dialogVisible = false
      },

     edilsubmit(){
        this.$refs.deailforms.validate( async (valid) => {
          if (!valid) {
             this.$message.error('修改失败')
             return}
       this.edail=false
      const{ data:res}=await this.$http.put('users/'+this.edilform.id,{email:this.edilform.email,mobile:this.edilform.mobile})
     this.$message.success('修改成功')
      this.getlist()
      
     
        })
      },
      edilclear(){
       this.edail=false
      },

      resetForm(forms) {

        this.$refs[forms].resetFields();
        this.dialogVisible = false
      },

   async sd(val){
    
   const {data:res}=await this.$http.put(`users/${val.id}/state/${val.mg_state}`)
   if (res.meta.status!==200) {
     this.$message.error('更新失败')
     val.mg_state=!val.mg_state
   }
     this.$message.success('更新成功')
  
    },
    handleSizeChange(val) {
       this.lists.pagesize=val
       this.getlist()
      },
      handleCurrentChange(val) {
       this.lists.pagenum=val
       this.getlist()
    },
    serch(){
this.getlist()
    },
   
    getlist(){
      this.$http.get('users',{params:this.lists}).then((res)=>{
        if (res.data.meta.status!==200) {
          this.$message.error('请求失败');
        }
        // console.log(res.data.data.users[0].role_name);
        this.names=res.data.data.users[0].role_name
        this.list=res.data.data.users
        this.total=res.data.data.total
     
      })
    },
    
  }

}
</script>


<style lang="less" scoped>
  
  .el-card{
margin-top: 60px; 
border-radius: 60px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.6); ;

}
.el-table{
  margin-top: 15px;
}
/deep/.el-form-item__label{
font-size: 12px;
}

 

</style>
